<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门</title>
	</head>
	<body>
		
		<div id="app">
		    <h1>动物园</h1>
			
				<router-link to="tiger">老虎</router-link>
				<router-link to="link">狮子</router-link>
				<router-view></router-view>
			
		</div>
		<template id="tigerTem">
			<div>
				<h1>老虎</h1>
			</div>
		</template>
		<template id="oneTem">
			<div>
				<h1>狮子</h1>
				<router-link to="/link/one">原配</router-link>
				<router-link to="/link/two">小妾</router-link>
				<router-view></router-view>
			</div>
		</template>
		<template id="twoTem">
			<div>
				<h1>狮子</h1>
				<router-link to="/link/one">强势</router-link>
				<router-link to="/link/two">更爱我</router-link>
				<router-view></router-view>
			</div>
		</template>

		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
		let tigerCom={
			template:"#tigerTem"
		}
		let linkCom={
			template:"#linkTem"
		}
		let oneCom={
			template:"#oneTem"
		}
		let twoCom={
			template:"#twoTem"
		}
		 let router=new VueRouter({
			 routes:[
				 {path:"/",redirect:"/lion"},
				 {path:"/tiger",component:tigerCom},
				 {path:"/link",component:linkCom,
				    children:[
					 {path:"/link/one",component:oneCom},
					 {path:"/link/two",component:twoCom},
				    ],
				 }
				 ]
		 })
		
		  
		const app=new Vue({
			el:"#app",
			router
		})
		
		</script>
	</body>
</html>
